<template>
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <right-container :tree="tree" />

  </div>
</template>

<script>
import RightContainer from './components/RightContainer.vue'
import { countMetricsBase } from '@/api/icp/monitoring'

export default {
  name: 'IcpMetrics',
  components: { RightContainer },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },
  data() {
    return {
      countGroupCodeList: ['event_level', 'event_category', 'event_type', 'entity_type'],
      //   搜索框的值
      input_value: '',
      //   子组件传输的值
      checkList: [],
      //   树形结构的值
      tree: []
    }
  },
  created() {
    this.getLeftFilter()
  },
  methods: {
    /** 获取左侧树*/
    getLeftFilter() {
      this.tree = []
      countMetricsBase(this.countGroupCodeList).then((res) => {
        this.countGroupCodeList.forEach(groupCode => {
          this.tree.push({
            subList: res.filter(data => data.groupCode === groupCode),
            groupName: res.find(data => data.groupCode === groupCode)?.groupName,
            groupCode: groupCode
          })
        })
      })
    },
    /** 重组数据-----*/
    resetData(result) {
      const newData = []
      return new Promise((resolve) => {
        result.forEach((i, index) => {
          newData.push(Object.assign({ showchild: true }, { ...i }))
        })
        resolve(newData)
      })
    },
    // 获取子组件传参
    getSel(data) {
      this.checkList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.rule-box {
  display: flex;
  flex-direction: column;
}

.app-container {
  padding: 0 !important;
}
</style>
